<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <title>地图显示</title>
    <style  scoped>
        #container{
            padding:0px;
            margin: 0px;
            width: 100%;
            height: 800px;
        }
    </style>
</head>
<body>

<div id="container"></div>
<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode:'d3c6629339f1697eb60225de8b421d7d',
        // 例如 ：serviceHost:'http://1.1.1.1:80/_AMapService',
    }
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=8024e336aa5f3f36351234674acbe550"></script>
<script src="https://webapi.amap.com/loader.js"></script>
<!-- 加载地图JSAPI脚本 -->
<script type="module">
    import AMapLoader from '@amap/amap-jsapi-loader';
    new Vue({
        name: "Mapview",
        data(){
            return{
                map:null,
            }
        },
        methods:{
            initMap(){
                AMapLoader.load({
                    key:"8024e336aa5f3f36351234674acbe550",             // 申请好的Web端开发者Key，首次调用 load 时必填
                    version:"2.0",      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                    plugins:[''],       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                }).then((AMap)=>{
                    this.map = new AMap.Map("container",{  //设置地图容器id
                        viewMode:"3D",    //是否为3D地图模式
                        zoom:5,           //初始化地图级别
                        center:[105.602725,37.076636], //初始化地图中心点位置
                    });
                }).catch(e=>{
                    console.log(e);
                })
            },
        }

    })
</script>
</body>
</html>